import React from 'react';
import styles from './index.less';
import { Row, Col, Table } from 'antd';
import { CloseCircleOutlined ,PhoneOutlined} from '@ant-design/icons';
import classNames from 'classnames';
import image from '@/assets/image.jpg';

export default class extends React.Component {
  render() {

    const detail = [
      {
        title: '测试测试：',
        cont: '测试测试'
      },
      {
        title: '测试测试：',
        cont: '测试测试'
      },
      {
        title: '测试测试：',
        cont: '测试测试测试测试测试测试'
      },
      {
        title: '测试测试：',
        cont: '测试测试测试测试测试测试'
      },
      {
        title: '测试测试：',
        cont: '测试测试测试测试测试测试测试测试测试测试测试'
      },
      {
        title: '测试测试：',
        cont: '测试测试'
      }]

    const detail1 = [{
      title: '时间编号：',
      cont: '10987892',
      title2: '黄颜色部分内容',
      cont2: '',
      diff: true,
    }, {
      title: '事件状态：',
      cont: '',
      title2: '上报来源：',
      cont2: '物联感应'
    }, {
      title: '事件类型：',
      cont: '城市管理',
      title2: '上报部门：',
      cont2: 'xxxx社区第一网格'
    }, {
      title: '事发时间：',
      cont: '2021-11-08 19：18',
      title2: '事发地点：',
      cont2: '杭州市萧山区蜀山街道戚家池社区'
    },]
    return (
      <div className={styles.container}>
        <div className={styles.header}>
          <div className={styles.title}>事件详情</div>
          <div className={styles.close}> <CloseCircleOutlined /></div>
        </div>

        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.left}>
              {
                detail.map((item, i) => {
                  return (<Row>
                    <Col span={24}>
                      <div className={styles.item}>
                        <span className={styles.itemTitle}>{item.title}</span>
                        <span className={styles.itemCont}>{item.cont}</span>
                      </div>
                    </Col>
                  </Row>)

                })
              }
            </div>
            <div className={styles.right}>
              <img width="350" height="200" src={image} />
              <div className={styles.photo}>现场照片</div>
            </div>

          </div >
          <div className={styles.middle}>
            {
              detail1.map((item, i) => {
                return (<Row>
                  <Col span={12}>
                    <div className={styles.item}>
                      <span className={styles.itemTitle}>{item.title}</span>
                      <span className={styles.itemCont}>{item.cont}</span>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className={styles.item}>
                      <span className={classNames([
                        styles.itemTitle,
                        {
                          [styles.itemTitleDiff]: item.diff,
                        },
                      ])}
                      >{item.title2}</span>
                      <span className={styles.itemCont}>{item.cont2}</span>
                    </div>
                  </Col>
                </Row>)

              })
            }
          </div>
          <div className={styles.bottom}>
          <Row>
            <Col span={12}>
              <div className={styles.item}>
                <span className={styles.itemTitle1}>事件描述：</span>
                <span className={styles.itemCont1}>11月18日发现市中心府东门发生火灾</span>
              </div>
            </Col>
            <Col span={12}>
              <div className={styles.main} >
                <span className={styles.item1}>一键督办</span>
                <span className={styles.item2}><PhoneOutlined /></span>

              </div>

            </Col>
          </Row>

          <Row>
            <Col span={24}>
              <div className={styles.item}>
                <div className={styles.itemTitle}>事件处理进度：</div>
                <div className={styles.itemCont2}>
                  <div className={styles.first}>
                    <span>已上报</span>
                  </div>
                  <div className={styles.first}>
                    <span>办结中</span>
                  </div>
                  <div className={styles.first}>
                    <span style={{color:'red'}}>已办结</span>
                  </div>
                  <div className={styles.second}>
                    <span>已入库</span>
                  </div>
                </div>

                
              </div>
            </Col>
          </Row>

          </div>
        </div>
      </div>
    );
  }
}
